<template>
    <div class="wrapper no-user-select">
        <!-- header and waves start  -->
        <div class="header">
            <!--header-content start-->
            <div class="header-content _flex">
                <!-- el card start -->
                <el-card>
                    <!-- el card header start -->
                    <template #header>
                        <p class="card-title">登录</p>
                    </template>
                    <!-- el card header end -->

                    <!-- el form start -->
                    <el-form ref="ruleFormRef" :model="form" :rules="rules" label-width="auto" style="min-width: 350px">
                        <el-form-item label="邮箱：" prop="email" required>
                            <el-input v-model="form.email" placeholder="xxxxxx@xxx.com" />
                        </el-form-item>
                        <el-form-item label="密码：" prop="password" required>
                            <el-input v-model="form.password" type="password" placeholder="******" />
                        </el-form-item>
                        <el-form-item>
                            <el-checkbox v-model="form.remember" label="记住我" />
                            <div class="flex-1"></div>
                            <el-button type="primary" :loading="login_btn_loading" @click="loginEvent(ruleFormRef)"> 登录 </el-button>
                        </el-form-item>
                    </el-form>
                    <!-- el form end -->

                    <!-- el card footer start -->
                    <template #footer>
                        <div class="card-footer grid">
                            <div class="flex justify-between">
                                <el-text class="link" tag="ins" @click="goToRetrieveEvent">忘记密码？</el-text>
                                <el-text class="link" tag="ins" @click="goToRegisterEvent">前往注册>>></el-text>
                            </div>
                        </div>
                    </template>
                    <!-- el card footer end -->
                </el-card>
                <!-- el card end -->
            </div>
            <!-- header-content end -->

            <!--waves start-->
            <svg
                class="waves"
                xmlns="http://www.w3.org/2000/svg"
                xmlns:xlink="http://www.w3.org/1999/xlink"
                viewBox="0 24 150 28"
                preserveAspectRatio="none"
                shape-rendering="auto"
            >
                <defs>
                    <path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
                </defs>
                <g class="parallax">
                    <use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(255,255,255,0.7" />
                    <use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(255,255,255,0.5)" />
                    <use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(255,255,255,0.3)" />
                    <use xlink:href="#gentle-wave" x="48" y="7" fill="#fff" />
                </g>
            </svg>
            <!--waves end-->
        </div>
        <!--header and waves ends-->

        <!--footer starts-->
        <div class="footer _flex">
            <div class="animation-underline">数字化管理系统</div>
            <div class="animation-underline">备案号：仅供内网使用</div>
            <div class="animation-underline">By：Print</div>
        </div>
        <!--footer ends-->
    </div>
</template>

<script setup lang="ts">
import type { FormInstance, FormRules } from 'element-plus';
// 密码
import { decrypt, encrypt } from '@utils/jsencrypt';
// 获取token
import { getToken, setToken } from '@/utils/cookie';
import { TokenKey } from '@/utils/cookie/tokenKey';
import { useUserStore } from '@/store/modules/user';

/* ***********************************通用属性*********************************** */
const router = useRouter();

/* ***********************************表单内容操作*********************************** */
// 表单元素
const ruleFormRef = ref<FormInstance>();
// 登录按钮加载
const login_btn_loading = ref(false);
// 表单数据
const form = reactive({
    email: decrypt(getToken(TokenKey.email)) || '',
    password: decrypt(getToken(TokenKey.password)) || '',
    remember: getToken(TokenKey.remember) === 'true',
});
// 表单验证
const rules = reactive<FormRules<typeof form>>({
    email: [{ required: true, message: '请输入邮箱' }],
    password: [
        { required: true, message: '请输入密码' },
        { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' },
    ],
});
// 登录按钮点击事件
const loginEvent = (formEl: FormInstance | undefined) => {
    // 表单验证
    if (!formEl) return;
    formEl.validate((valid) => {
        if (valid) {
            // 登录按钮加载
            login_btn_loading.value = true;
            // 记住密码
            if (form.remember) {
                setToken(TokenKey.remember, 'true');
                setToken(TokenKey.email, encrypt(form.email) as string);
                setToken(TokenKey.password, encrypt(form.password) as string);
            }
            useUserStore()
                .login(form)
                .then(() => {
                    // 登录成功
                    router.replace({ path: '/index' });
                });

            // 取消登录按钮加载
            setTimeout(() => {
                login_btn_loading.value = false;
            }, 3000);
        }
    });
};
// 跳转找回页
const goToRetrieveEvent = () => {
    router.push({ path: '/retrieve' });
};
// 跳转注册页
const goToRegisterEvent = () => {
    router.push({ path: '/register', query: { redirect: '/index' } });
};

// 监测表单数据变化
watch(
    () => form,
    () => {
        // 取消登录按钮加载
        login_btn_loading.value = false;
    },
    { deep: true }
);
</script>

<style scoped lang="scss">
._flex {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

// 容器
.wrapper {
    width: 100vw;
    overflow: hidden;
    // 头部
    .header {
        position: relative;
        text-align: center;
        background: linear-gradient(60deg, rgba(84, 58, 183, 1) 0%, rgba(0, 172, 193, 1) 100%);
        color: white;
    }

    // 头部内容
    .header-content {
        height: 65vh;
        width: 100%;
        margin: 0;
        padding: 0;
    }

    // 浪花
    .waves {
        position: relative;
        width: 100%;
        height: 15vh;
        margin-bottom: -7px; /*Fix for safari gap*/
        min-height: 100px;
        max-height: 150px;
    }

    // 页脚
    .footer {
        position: relative;
        height: 20vh;
        text-align: center;
        background-color: white;
        justify-content: space-around;
    }
}

// 波浪动画
.parallax > use {
    animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
    &:nth-child(1) {
        animation-delay: -2s;
        animation-duration: 7s;
    }
    &:nth-child(2) {
        animation-delay: -3s;
        animation-duration: 10s;
    }
    &:nth-child(3) {
        animation-delay: -4s;
        animation-duration: 13s;
    }
    &:nth-child(4) {
        animation-delay: -5s;
        animation-duration: 20s;
    }
}
@keyframes move-forever {
    0% {
        transform: translate3d(-90px, 0, 0);
    }
    100% {
        transform: translate3d(85px, 0, 0);
    }
}

// 卡片标题
.card-title {
    font-size: 28px;
    color: royalblue;
    font-weight: 600;
    letter-spacing: -1px;
    position: relative;
    display: flex;
    align-items: center;
    padding-left: 30px;

    &::before,
    &::after {
        position: absolute;
        content: '';
        height: 16px;
        width: 16px;
        border-radius: 50%;
        left: 0px;
        background-color: royalblue;
    }

    &::before {
        width: 18px;
        height: 18px;
        background-color: royalblue;
    }

    &::after {
        width: 18px;
        height: 18px;
        animation: pulse 1s linear infinite;
    }
}
@keyframes pulse {
    from {
        transform: scale(0.9);
        opacity: 1;
    }

    to {
        transform: scale(1.8);
        opacity: 0;
    }
}
</style>
